<template>
  <div>
    <el-dialog
      :visible.sync="showimport"
      top="6%"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="60%"
    >
      <div class="header">审核人问卷导入</div>
      <div class="des1">
        要求：
        <!-- <b>当前任务id----{{ taskId }}</b> -->
        <p>1.选项类型为： 1-单选 2-多选</p>
        <p>2.最小数和最大数只有选项类型为多选时才填写</p>
        <p>
          3.选项、能力子项ID、选项分值、被评分人项目角色ID和分值类型，
          以顿号分割且一一对应
        </p>
        <p>4.分值类型为： 1-过程性考核 2-阶段性考核</p>
        <p>例图：</p>
        <img src="@/assets/wenjuanlitu.png" alt="" />
      </div>
      <div class="des1">
        1. 下载
        <a href="http://demo.zhihanyixing.com/file/问卷导入模板.xlsx"
          >问卷导入模板</a
        >按照模版的格式填写相关信息。
      </div>
      <div class="des2">
        2. 填写完成后，保存模版文档，然后
        <el-upload
          style="display: inline-block"
          :headers="{ token: token }"
          :data="{
            taskId: taskId,
            type: 2,
          }"
          action="http://test.zhihanyixing.com:8084/testing/TestingExcel"
          :on-success="handleSuccess"
        >
          <button>上传</button>
        </el-upload>
      </div>
      <div class="footer">
        <button @click="onClose()">关闭</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'daoru',
  // 传入的数据
  props: {
    showimport: {
      type: Boolean,
      require: true
    },
    token: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      // token: sessionStorage.getItem('usertoken'),
      taskId: parseInt(localStorage.getItem('taskId'))
    };
  },
  methods: {
    onOpen() {
      // console.log('dakai ');
      // console.log(sessionStorage.getItem('usertoken'));
    },
    onClose() {
      // console.log('guanbi ');
      this.$emit('update:showimport', false);
    },
    handleSuccess(res) {
      // console.log(res, '122');
      if (res.code === 200) {
        this.$message({
          showClose: true,
          type: 'success',
          message: '导入成功'
        });
        this.$emit('update:showimport', false);
        this.$emit('updateList');
      } else {
        this.$message({
          showClose: true,
          type: 'error',
          message: '导入失败，请上传正确的数据！'
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 45px;

  background: #f1f5ff;
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  line-height: 45px;
  text-align: center;
}
.des1 {
  width: 90%;
  margin: 30px auto;
  text-align: left;
  img {
    width: 100%;
    // height: 50px;
  }
  img:hover {
    transform: scale(1.7);
  }
  a {
    font-size: 12px;
    line-height: 26px;
    color: #ffffff;
    text-align: center;
    display: inline-block;
    width: 115px;
    height: 26px;
    background: #2fc0e0;
    border-radius: 4px;
    vertical-align: middle;
    margin: 0 5px;
  }
}
.des2 {
  width: 90%;
  margin: 0 auto;
  margin-bottom: 30px;
  text-align: left;
  button {
    cursor: pointer;
    font-size: 12px;
    line-height: 26px;
    color: #ffffff;
    text-align: center;
    width: 65px;
    height: 26px;
    background: #2fc0e0;
    border-radius: 4px;
    vertical-align: middle;
    margin: 0 5px;
  }
}
.footer {
  width: 100px;
  border-radius: 4px;
  margin: 0 auto;
  padding-bottom: 30px;
  button {
    width: 100%;
    height: 35px;
    font-size: 16px;
    background: #e8f8fb;
    cursor: pointer;
    color: #2fc0e0;
    border-radius: 4px;
  }
}
// 隐藏上传文件列表
/deep/.el-upload-list {
  display: none;
}
// 清除表头
/deep/.el-dialog__header {
  display: none;
}
/deep/.el-dialog__body {
  padding: 0;
}
</style>
